<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>小米</title>
    <style>
        body {
            margin: 0;
            background-color: white;
        }

        #logo {
            background-image: url("./images/bg.png");
            background-color: #f37d0f;
            background-size: cover;
        }

        #logo img {
            width: 50px;
            margin: 18px 10px 18px 18px;
            vertical-align: middle;
            box-shadow: 0px 0px 2px 2px #ffb70c;
            border-radius: 50%;
        }

        #logo span {
            vertical-align: middle;
            color: white;
            font-size: 14px;
        }

        #wddd {
            background-color: white;
            padding: 10px 18px;
            border-bottom: 1px solid #bbb;
            position: relative;
        }

        .yjt {
            background-image: url("./images/icon_arrow_right_black@2x.png");
            background-position: 95% center;
            background-repeat: no-repeat;
            background-size: 8px 15px;
        }

        #qb {
            font-size: 14px;
            position: absolute;
            right: 10%;
        }

        #sxx {
            padding: 0px 18px;
            background-color: white;
        }

        #sxx div {
            display: inline-block;
            margin: 20px 33px 5px;
        }

        #sxx img {
            width: 30px;
        }

        #sxx p {
            font-size: 13px;
        }

        ul {
            background-color: white;
            list-style: none;
            padding-left: 18px;
        }

        .xxiang {
            padding-left: 50px;
            background-position: 0 center;
            background-repeat: no-repeat;
            background-size: 30px 30px;
        }

        .xxiang div {
            border-bottom: 1px solid #bbb;
            padding: 20px 20px 20px 0px;
        }

        .xxiang:last-child div {
            border: none;
        }
    </style>
</head>

<body>
    <div class="main">
        <div id="logo">
            <img src="./images/user.png" alt="">
            <span>登陆/注册</span>
        </div>
    </div>
    <div>
        <div id="wddd" class="yjt">
            <span>我的订单</span>
            <span id="qb">全部订单</span>
        </div>
        <div id="sxx">
            <div>
                <img src="./images/wait-pay.png" alt="">
                <p>待付款</p>
            </div>
            <div>
                <img src="./images/receive-goods.png" alt="">
                <p>待收获</p>
            </div>
            <div>
                <img src="./images/reback-fix.png" alt="">
                <p>退换修</p>
            </div>
        </div>
    </div>
    <div>
        <ul>
            <li class="xxiang" style='background-image: url("./images/an-crown.png")'>
                <div class="arrow">会员中心</div>
            </li>
            <li class="xxiang" style='background-image: url("./images/card.png")'>
                <div class="arrow">我的优惠</div>
            </li>
        </ul>
        <ul>
            <li class="xxiang" style='background-image: url("./images/server-heard.png")'>
                <div class="arrow">服务中心</div>
            </li>
            <li class="xxiang" style='background-image: url("./images/mi-home.png")'>
                <div class="arrow">小米之家</div>
            </li>
        </ul>
        <ul>
            <li class="xxiang" style='background-image: url("./images/f-code.png")'>
                <div class="arrow">我的F码</div>
            </li>
            <li class="xxiang" style='background-image: url("./images/gifs.png")'>
                <div class="arrow">礼物码兑换</div>
            </li>
        </ul>
        <ul>
            <li class="xxiang" style='margin-bottom:5rem; background-image: url("./images/setting.png")'>
                <div class="arrow">设置</div>
            </li>
        </ul>
    </div>





    <div id="nav-bottom-fixed">
        <div><a href="./shouye.html"><i
                    style="background-image: url('./images/icon-home-selected.598ca2c8f9.png');"></i>首页</a></div>
        <div><a href="./fenlei.html"><i style="background-image: url('./images/icon-category.be93273636.png');"></i>分类</a>
        </div>
        <div><a href="./gouwuche.html"><i style="background-image: url('./images/icon-cart.585c3aa4d3.png');"></i>购物车</a>
        </div>
        <div><a style="color: #ff5e2d;" href="./wode.html"><i style="background-image: url('./img/icon-user-selected.fceea5d907.png');"></i>我的</a></div>
    </div>
</body>

</html>